<script setup lang="ts">
import { computed, ref } from 'vue';
import AuthBar from '@/components/authBar/index.vue';
import Login from '@/components/login/index.vue';
import { useIntervalFn } from '@/hooks/useIntervalFn';
import { useReadCard } from '@/hooks/useReadCard';
import { buildAssetSource } from '@/utils';
import { isApp, isH5 } from '@/utils/platform.utils';
import { currRoute, withQueryString } from '@/utils/router.utils';

const { readCard, stopReadCard } = useReadCard();

// 识别状态
enum RECOGNIZE_STATUS {
  // 初始化
  INIT,
  // 识别中
  RECOGNIZING,
  // 识别成功
  SUCCESS,
  // 识别失败
  FAIL
}

const recognizeStatus = ref<RECOGNIZE_STATUS>(RECOGNIZE_STATUS.INIT);

// 状态描述文案
const recognizeStatusDesc = computed(() => {
  let statusText = {
    title: '',
    desc: ''
  };
  switch (recognizeStatus.value) {
    case RECOGNIZE_STATUS.INIT:
      statusText = {
        title: '请放置身份证',
        desc: '将您的第二代身份证放置于自助机的身份证感应区'
      };
      break;
    case RECOGNIZE_STATUS.RECOGNIZING:
      statusText = {
        title: '身份证扫描',
        desc: '正在扫描身份证'
      };
      break;
    case RECOGNIZE_STATUS.SUCCESS:
      statusText = {
        title: '扫描成功',
        desc: '身份证扫描成功，请稍后...'
      };
      break;
    case RECOGNIZE_STATUS.FAIL:
      statusText = {
        title: '扫描失败',
        desc: '扫描失败,请重新放置身份证'
      };
      break;
  }
  return statusText;
});

const progress = ref(0);

const { pause: stopScanProgress, resume: startScanProgress } = useIntervalFn(() => {
  if (progress.value >= 100) {
    progress.value = 100;
    stopScanProgress();
    stopReadCard();
    recognizeStatus.value = RECOGNIZE_STATUS.FAIL;
    return;
  }
  progress.value += progress.value < 50 ? 0.1 : 0.01;
}, 16.7, { immediate: false });

const idCardInfo = {
  type: '1',
  sex: '男',
  birthDate: '1999-02-02',
  idno: '431103199902025714',
  issue: '永州市公安局冷水滩分局',
  sexCode: '1',
  fingerPrintBase64: 'QwF0DwELTwAAAAAAAAAAAAAAACMAjP///////////50UrPx1G6n8jiJX/hY8sPw9Ql3+VEep/F9JrPxoTmD+N1mx/M1bUf6CYqL8P2Vl/qZyovxJfLf8l4ap/CSbvPwuqcX8u7Kd/C6+Dvxbwrz8nM+m/N7PnfyF3GH+wdxN/sbkmfwT6NP8PPHM/K77nfxYBBT9kwWs/d8KRf8uHt79UR7i/Z1TMP+1Uxv/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKNDAXQPARBUAAAAAAAAAAAAAAAAKACg////////////dArM/F8UG/yWGBj8ViwY/Kk0wfyYOA38rjsR/No6DvzXYsX8TGUZ/NBoAPwld9D8LHsU/KR9C/yLkwv8MpnU/EKoGPzVqVf+572g/La/Xf6O3Qv8FeEm/L7ySv6N+wj8Kgwp/YwNAP1IENr9tA9C/6UVrv17KBb9vycu/5AxXv+SRPP9iEvv/ZVM9f2jTgj/e1Pr/dtUJP99XTv9jF9B/QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA6w==',
  expireDate: '2028-08-30',
  name: '罗可可',
  nation: '汉',
  nationCode: '01',
  address: '湖南省永州市冷水滩区黄阳司镇大湾村38号',
  effectData: '2018-08-30',
  photoBase64: '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'
};

const { query } = currRoute();
function handleStartScan() {
  recognizeStatus.value = RECOGNIZE_STATUS.RECOGNIZING;
  progress.value = 0;
  startScanProgress();

  if (isApp || isH5) {
    recognizeStatus.value = RECOGNIZE_STATUS.SUCCESS;

    uni.navigateTo({
      url: withQueryString('/pages/login/loginConfirm', { ...query, ...idCardInfo })
    });
    return;
  }

  readCard().then(res => {
    console.log('>>>读取身份证res', res);
    recognizeStatus.value = RECOGNIZE_STATUS.SUCCESS;
    setTimeout(() => {
      uni.navigateTo({
        url: withQueryString('/pages/login/loginConfirm', {
          ...query,
          ...res
        })
      });
    }, 300);
  }).catch(() => {
    recognizeStatus.value = RECOGNIZE_STATUS.FAIL;
  }).finally(() => {
    stopScanProgress();
  });
}

const loginRef = ref<InstanceType<typeof Login>>();

function onOpenLogin() {
  loginRef.value?.onOpenLoginModal();
}
</script>

<template>
  <view class="login-idcard flex-col">
    <AuthBar back-home />
    <view class="flex-1 overflow-auto">
      <view class="login-idcard__cover m-auto mt-45">
        <image :src="buildAssetSource('idcard-icon.png')" class="h-128 w-128" />
      </view>
      <view class="login-idcard__title mt-34">
        {{ recognizeStatusDesc.title }}
      </view>
      <view class="login-idcard__desc mt-34">
        {{ recognizeStatusDesc.desc }}
      </view>

      <view class="mt-48 px-162">
        <view class="login-idcard__content">
          <!-- 初始化 -->
          <view v-if="recognizeStatus === RECOGNIZE_STATUS.INIT" class="pt-60">
            <view class="idcard-content__title text-center">
              身份证感应区
            </view>
            <view class="mt-45 flex-center">
              <image :src="buildAssetSource('card-scan.png')" class="h-202 w-635" />
            </view>
            <view class="flex-center">
              <view class="idcard-content__desc">
                请将身份证芯片面朝上放置
              </view>
            </view>
          </view>

          <!-- 识别中 -->
          <view v-if="recognizeStatus === RECOGNIZE_STATUS.RECOGNIZING" class="pb-44">
            <view class="mb-70 flex-center px-105 pt-60">
              <image :src="buildAssetSource('card-person.png')" class="h-384 w-full" />
            </view>
            <view class="progress px-55">
              <wd-progress :percentage="progress" hide-text :duration="0" />
            </view>
            <view class="progress-text mt-54">
              身份证扫描中,请稍后...
            </view>
          </view>

          <!-- 识别成功 -->
          <view v-if="recognizeStatus === RECOGNIZE_STATUS.SUCCESS" class="pb-58 pt-74">
            <view class="complete-icon flex-center">
              <image :src="buildAssetSource('dui.png')" class="h-105 w-105" />
            </view>
            <view class="complete-info mt-46">
              身份证信息已验证
            </view>
            <view class="progress-text mt-33">
              正在为您登录系统...
            </view>

            <view class="mt-70 flex-center">
              <image :src="buildAssetSource('loading.png')" class="h-130 w-130 animate-spin" />
            </view>
          </view>

          <!-- 识别失败 -->
          <view v-if="recognizeStatus === RECOGNIZE_STATUS.FAIL" class="pb-93 pt-74">
            <view class="complete-icon flex-center">
              <image :src="buildAssetSource('login-close.png')" class="h-105 w-105" />
            </view>
            <view class="complete-info mt-36">
              身份证扫描失败
            </view>
            <view class="progress-text mt-33">
              请检查身份证放置位置并重试
            </view>
          </view>
        </view>
      </view>

      <view v-if="recognizeStatus === RECOGNIZE_STATUS.INIT" class="mt-46 flex-center">
        <view class="action-btn w-708">
          <wd-button block @click="handleStartScan">
            开始识别
          </wd-button>
        </view>
      </view>

      <view v-if="recognizeStatus === RECOGNIZE_STATUS.FAIL" class="my-86 flex-center">
        <view class="action-btn w-371">
          <wd-button block @click="handleStartScan">
            重试
          </wd-button>
        </view>
        <view class="action-btn ml-30 w-371">
          <wd-button block @click="onOpenLogin">
            更换方式
          </wd-button>
        </view>
      </view>

      <view class="mt-50 px-50">
        <view class="login-tips">
          <view class="tips-title">
            <wd-icon name="help-circle" size="32px" /> 使用提示
          </view>
          <view class="tips-content">
            <view>
              1.请将身份证芯片面朝上放置
            </view>
            <view class="mt-10">
              2.确保身份证平整，无遮挡
            </view>
            <view class="mt-10">
              3.扫描过程中请勿移动身份证
            </view>
          </view>
        </view>
      </view>

      <Login ref="loginRef" />
    </view>
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '用户登录',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.login-idcard {
  background-color: var(--bg-color);
  height: 100%;

  .login-idcard__cover {
    @apply flex-center;
    background: #e5efff;
    width: 202px;
    height: 202px;
    border-radius: 50%;
  }

  .login-idcard__title {
    color: var(--text-color);
    font-weight: bold;

    font-size: 60px;
    text-align: center;
  }

  .login-idcard__desc {
    font-size: 28px;
    color: var(--secondary-text-color);
    text-align: center;
  }

  .login-idcard__content {
    background: #fff;
    border-radius: 20px;

    .idcard-content__title {
      font-size: 36px;
      font-weight: 500;

      color: var(--text-color);
    }

    .idcard-content__desc {
      background: #e5efff;
      border-radius: 10px;
      color: var(--secondary-text-color);
      display: inline-block;
      padding: 24px 36px;
      font-size: 28px;
      margin: 45px auto;
    }

    .progress {
      --wot-progress-height: 30px;
      --wot-progress-bg: #c0dcff;
      --wot-progress-color: var(--primary);
    }

    .progress-text {
      font-size: 28px;
      color: var(--secondary-text-color);
      text-align: center;
    }

    .complete-icon {
      width: 160px;
      height: 160px;
      border-radius: 50%;
      background: #e5efff;
      margin: 0 auto;
    }

    .complete-info {
      text-align: center;
      font-size: 48px;
      font-weight: bold;
      color: var(--text-color);
    }
  }

  .action-btn {
    --wot-button-medium-height: 124px;
    --wot-button-medium-fs: 42px;

    :deep(.wd-button) {
      font-weight: bold;
    }
  }

  .login-tips {
    background: rgba(247, 250, 254, 0.5);
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 38px 0 38px 31px;
    margin-bottom: 45px;

    .tips-title {
      font-size: 32px;
      font-weight: bold;

      color: var(--text-color);
    }

    .tips-content {
      font-size: 24px;
      color: var(--secondary-text-color);
      margin-top: 25px;
    }
  }
}
</style>
